<nz-page-header>
  <nz-page-header-title>{{ paperTitleInfo.paperTitle }}</nz-page-header-title>
  <nz-page-header-subtitle>{{
    paperTitleInfo.courseName
  }}</nz-page-header-subtitle>
  <nz-page-header-extra>
    <button nz-button nzType="primary" (click)="showModal()">发布</button>
  </nz-page-header-extra>
  <nz-page-header-content>
    <div class="wrap">
      <div nz-row class="content padding">
        <div nz-col nzSpan="12">
          <div class="description">
            <span class="term">总分</span>
            <p class="detail">{{ paperTitleInfo.totalScores }}</p>
          </div>
        </div>
        <div nz-col nzSpan="12">
          <div class="description">
            <span class="term">难度</span>
            <p class="detail">{{ paperTitleInfo.difficulty }}</p>
          </div>
        </div>
        <div nz-col nzSpan="12">
          <div class="description">
            <span class="term">创建时间</span>
            <p class="detail">{{ paperTitleInfo.createTime }}</p>
          </div>
        </div>
        <div nz-col nzSpan="12">
          <div class="description">
            <span class="term">创建人</span>
            <p class="detail">
              {{ paperTitleInfo.teacherName }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </nz-page-header-content>
  <nz-page-header-footer>
    <nz-divider nzText="试卷详情"></nz-divider>

    <ng-container *ngIf="selectList.length != 0">
      <div class="title-font">
        选择题(每道题{{ paperTitleInfo.selectScore }}分)
      </div>
      <ng-container
        *ngFor="let item of selectList; let i = index"
        class="title-show"
      >
        <div class="title-show">{{ i + 1 }}.{{ item.title }}</div>
        <div class="title-show">
          A: {{ item.sectionA }} &nbsp;&nbsp;B: {{ item.sectionB }} &nbsp;&nbsp;
          C: {{ item.sectionC }}&nbsp;&nbsp; D:{{ item.sectionD }}
        </div>
        <div class="title-show">
          答案: {{ item.answer }} 解析: {{ item.analysis }}
        </div>
        <div class="title-show">难度: {{ item.difficulty }}</div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="blankList.length != 0">
      <div class="title-font">
        填空题(每道题{{ paperTitleInfo.blankScore }}分)
      </div>
      <ng-container *ngFor="let item of blankList; let i = index">
        <div class="title-show">{{ i + 1 }}.{{ item.title }}</div>
        <div class="title-show">答案: {{ item.answer }}</div>
        <div class="title-show">解析: {{ item.analysis }}</div>
        <div class="title-show">难度: {{ item.difficulty }}</div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="answerList.length != 0">
      <div class="title-font">
        简答题(每道题{{ paperTitleInfo.answerScore }}分)
      </div>
      <ng-container *ngFor="let item of answerList; let i = index">
        <div class="title-show">{{ i + 1 }}.{{ item.title }}</div>
        <div class="title-show">答案: {{ item.answer }}</div>
        <div class="title-show">解析: {{ item.analysis }}</div>
        <div class="title-show">难度: {{ item.difficulty }}</div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="codeList.length != 0">
      <div class="title-font">
        代码题(每道题{{ paperTitleInfo.codeScore }}分)
      </div>
      <ng-container *ngFor="let item of codeList; let i = index">
        <div class="title-show">{{ i + 1 }}.{{ item.title }}</div>
        <div class="title-show">答案: {{ item.answer }}</div>
        <div class="title-show">解析: {{ item.analysis }}</div>
        <div class="title-show">难度: {{ item.difficulty }}</div>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="algorithmList.length != 0">
      <div class="title-font">
        算法题(每道题{{ paperTitleInfo.algorithmScore }}分)
      </div>
      <ng-container *ngFor="let item of algorithmList; let i = index">
        <div class="title-show">{{ i + 1 }}.{{ item.title }}</div>
        <div class="title-show">答案: {{ item.answer }}</div>
        <div class="title-show">解析: {{ item.analysis }}</div>
        <div class="title-show">难度: {{ item.difficulty }}</div>
      </ng-container>
    </ng-container>
  </nz-page-header-footer>
</nz-page-header>
<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="准备发布"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading"
>
  <div>
    <div>
      选择班级
      <nz-select
        id="class-select"
        [nzMaxTagCount]="3"
        [nzMaxTagPlaceholder]="tagPlaceHolder"
        style="width: 100%"
        nzMode="multiple"
        nzPlaceHolder="选择班级"
        [(ngModel)]="listOfSelectedValue"
      >
        <nz-option
          *ngFor="let option of classListOption"
          [nzLabel]="option.label"
          [nzValue]="option.value"
        ></nz-option>
      </nz-select>
      <ng-template #tagPlaceHolder let-selectedList>
        还有 {{ selectedList.length }} 已选择
      </ng-template>
    </div>

    <br />
    选择考试日期
    <nz-range-picker
      style="width: 100%"
      [nzShowTime]="{ nzFormat: 'HH:mm' }"
      nzFormat="yyyy-MM-dd HH:mm"
      [nzPlaceHolder]="['开始日期', '结束日期']"
      (ngModelChange)="onChange($event)"
      (nzOnOk)="onOk($event)"
    ></nz-range-picker>
    <br />
    选择考试时长
    <br />
    <!-- 小时 -->
    <nz-select
      style="width: 120px;"
      [(ngModel)]="selectHours"
      nzAllowClear
      nzPlaceHolder="请选择小时"
    >
      <nz-option nzValue="0" nzLabel="00小时"></nz-option>
      <nz-option nzValue="1" nzLabel="01小时"></nz-option>
      <nz-option nzValue="2" nzLabel="02小时"></nz-option>
      <nz-option nzValue="3" nzLabel="03小时"></nz-option>
      <nz-option nzValue="4" nzLabel="04小时"></nz-option>
      <nz-option nzValue="5" nzLabel="05小时"></nz-option>
      <nz-option nzValue="6" nzLabel="06小时"></nz-option>
    </nz-select>
    &nbsp;
    <nz-select
      style="width:  120px;"
      [(ngModel)]="listOfMinOptions"
      nzPlaceHolder="请选择分钟"
    >
      <nz-option
        *ngFor="let option of listOfMin"
        [nzLabel]="option.label"
        [nzValue]="option.value"
      >
      </nz-option>
    </nz-select>
  </div>
</nz-modal>
